<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="app">
	 <div>
       <label>id:
         <input type="text" v-model="id">
       </label>
       <label>name:
         <input type="text" v-model="name">
       </label>
       <input type="button" value="添加" @click="add">
	 </div>
     <p v-for="item in list" :key="item.id">
       <input type="checkbox">{{item.id}}----->{{item.name}}
     </p>

	</div>
	<script>
         var vm=new Vue({
         	el:'#app',

         	data:{
              id:'',
              name:'',
              list:[
                 {id:1,name:'李斯'},
                 {id:2,name:'嬴政'},
                 {id:3,name:'项羽'},
                 {id:4,name:'荀子'}
              ]
         	},
            
            methods:{
            	add(){
            		this.list.unshift({id:this.id,name:this.name})
            	}
            }

         });
	</script>
</body>
</html>